<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *
        {
            margin: 0px;
        }
        .div1
        {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 20px;
            left: 10px;
            background: blue;
        }
        .div2
        {
            position: absolute;
            width: 100px;
            height: 100px;
            /*top: 50px;*/
            background: red;
        }
        .div3
        {
            position: absolute;
            top: 250px;
        }
    </style>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.向id为ul1的ul下添加一个span(最后)
        2.向id为ul1的ul下添加一个span(最前)
        3.在id为ul1的ul下的li(title为hello)的前面添加span
        4.在id为ul1的ul下的li(title为hello)的后面添加span
        5.将在id为ul2的ul下的li(title为hello)全部替换为p
        6.移除id为ul2的ul下的所有li
        */
       $(function(){
           //1.向id为ul1的ul下添加一个span(最后)
           var $id_ul1_ul=$("ul#ul1");
           $id_ul1_ul.append("<span>1.添加在最后的span</span>");
           $("<br><span>2.添加在最后的span</span>").appendTo($id_ul1_ul);

           //2.向id为ul1的ul下添加一个span(最前)
           $id_ul1_ul.prepend("<br><span>1.添加到前面的span</span>");
           $("<span>2.添加到前面的span</span>").prependTo($id_ul1_ul);

           //3.在id为ul1的ul下的li(title为hello)的前面添加span
           var $id_ul1_ul_li_titlehello=$("ul#ul1>li[title='hello']");
           //console.log($id_ul1_ul_li_titlehello);
           $id_ul1_ul_li_titlehello.before("<span>1.添加到id为ul1的ul下的li的前面</span>");
           $("<br><span>2.添加到id为ul1的ul下的li的前面</span>").insertBefore($id_ul1_ul_li_titlehello);

           //4.在id为ul1的ul下的li(title为heelo)的后面添加span
           $id_ul1_ul_li_titlehello.after("<br><span>1.添加到id为ul1的ul下的li的后面</span>");
           $("<span>2.添加到id为ul1的ul下的li的后面</span>").insertAfter($id_ul1_ul_li_titlehello);

           //5.将在id为ul2的ul下的li(title为hello)全部替换为p
           var $id_ul2_ul_li_titlehello=$("ul#ul2>li[title='hello']");
           //console.log($id_ul2_ul_li_titlehello);
           //$id_ul2_ul_li_titlehello.replaceWith("<p>将在id为ul2的ul下的li(title为hello)全部替换为p</p>");
           $("<p>将在id为ul2的ul下的li(title为hello)全部替换为</p>").replaceAll($id_ul2_ul_li_titlehello);

           //以上五个修改要求都有两种修改方式，而且语法都非常的类似

           //6.移除id为ul2的ul下的所有li
           var $id_ul2_ul_li=$("ul#ul2>li");
           $id_ul2_ul_li.remove();
           var $id_ul2_ul=$("ul#ul2");
           //$id_ul2_ul.empty();
       })
    </script>
</head>
<body>
    <ul id="ul1">
        <li>AAAAA</li>

        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>

        <li title="hello">DDDDD</li>
        <li title="two">EEEEE</li>
        <li>FFFFF</li>
    </ul>
    <br>
    <br>
    <ul id="ul2">
        <li>aaa</li>
        <li title="hello">bbb</li>
        <li class="box">ccc</li>
        <li title="hello">ddd</li>
        <li title="two">eee</li>
    </ul>
    <!--
        1.添加/替换元素
        append(content)
        向当前匹配的所有元素内部的最后插入指定内容
        prepend(content)
        向当前匹配的所有元素内部的最前面插入指定内容
        before(content)
        将指定内容插入到当前所有匹配元素的前面
        after(content)
        将指定内容插入到当前所有匹配元素的后面替换节点
        replaceWith(content)
        用指定内容替换所有匹配的标签删除节点
        2.删除元素
        empty()
        删除所有匹配元素的子元素
        remove()
        删除所有匹配的元素
    -->
</body>
</html>